<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>发布文章</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/editor/css/editormd.min.css}"/>
    <link rel="stylesheet" th:href="@{/semantic/semantic.min.css}">
    <style>

    </style>
</head>
<body style="background-color: #FAFAFA">

<div class="layui-container" style="width: auto">

    <div class="layui-row">

        <div class="layui-col-md10 layui-col-md-offset1">
            <!--        导航栏-->
            <div th:insert="component/user-header.html::header('发布文章')"></div>

            <!--            内容-->
            <div id="app" class="layuimini-main layui-form" style="font-size: 16px; margin-top: 30px">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题：</label>
                    <div class="layui-input-block">
                        <input v-model="title" type="text" name="title" required
                               lay-verify="required" autocomplete="off" class="layui-input"
                               style="width: 300px">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">标签：</label>
                    <div class="layui-input-block">
                        <input v-model="tag" type="text" name="title" required
                               lay-verify="required" autocomplete="off" class="layui-input"
                               style="width: 300px">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">内容：</label>
                    <div id="editor" class="layui-input-block"></div>
                </div>


                <button v-on:click="submit" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

            </div>
        </div>

    </div>

    <div th:insert="index.html::pageTail"></div>
</div>

<script th:src="@{/js/jquery.min.js}" crossorigin="anonymous"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/editor/editormd.min.js}"></script>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script type="text/javascript">
    var editor

    // vue
    new Vue({
        el: '#app',
        data: {
            title: "",
            tag: "",
        },
        methods: {
            submit: function () {
                var requestData = {
                    title: this.title,
                    tag: this.tag,
                    content: editor.getMarkdown()
                }
                axios.post('/topic/add', requestData).then(response => {
                    console.log(response)
                    window.location = response.data
                })
            },

            checkNullAndSpace: function (text) {
                if (text == null || text.replace(/^\s+,""/).replace(/^\s+$/, "") == '')
                    return true
                else return false
            }
        }
    })

    editor = editormd("editor", {
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: "/image/upload",
        width: "91%",
        height: "700px",
        path: "/editor/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
    });
</script>

</body>
</html>